<template>
    <div class="template-container">
        <div class="animate-templates-box" v-if="templates.length > 0">
            <div
                class="animate-template-item"
                v-for="(item) in templates"
                :key="item._id"
            >
                <i
                    class="el-icon-delete-solid animation-template-delete"
                    @click="deleteTemplate($event, item._id)"
                />
                <i
                    class="animation-template-edit el-icon-edit"
                    @click="editTemplate($event, item.uid)"
                />
                <template-preview
                    :template="item"
                    :ref="`animation_${item._id}`"
                />
                <div class="animate-template-name">{{item.name}}</div>
            </div>
        </div>
        <template v-if="templates.length === 0">
            <el-empty description="还没有模板，赶快创建模板吧"></el-empty>
        </template>
    </div>
</template>

<script>
import axios from 'axios';
import TemplatePreview from './TemplatePreview.vue';
export default {
    components: {
        TemplatePreview,
    },
    data() {
        return {
            templates: [],
        };
    },
    created() {
        axios.get('/api/mineTemplates')
        .then((res) => {
            const { code, msg , data } = res.data;
            if (Number(code) === 0) {
                this.templates = data;
            } else {
                this.$message({
                    type: 'info',
                    message: msg,
                });
            }
        });
    },
    methods: {
        editTemplate(e, templateId) {
            e.stopPropagation();
            this.$router.push({
                path: `/build?templateId=${templateId}`
            });
        },
        deleteTemplate(e, templateId) {
            e.stopPropagation();
            axios({
                method: 'post',
                url: '/api/deleteTemplate',
                data: {
                    templateId,
                },
            }).then((res) => {
                const { code, msg } = res.data;
                if (Number(code) === 0) {
                    const templateIndex = this.templates.findIndex(vo => vo._id === templateId);
                    if (templateIndex >= 0) {
                        this.templates.splice(templateIndex, 1);
                    }
                    this.$message({
                        type: 'success',
                        message: '操作成功',
                    });
                } else {
                    this.$message.error(msg);
                }
            });
        }
    }
}
</script>

<style lang="less" scoped>
.template-container {
    width: 100%;
    height: 100%;
    .animate-templates-box {
        width: 100%;
        height: 100%;
        .animate-template-item {
            display: inline-block;
            width: 480 * 0.7px;
            height: 280 * 0.7px;
            margin: 4px 8px;
            border: solid 1px #eff4fc;
            float: left;
            position: relative;
            .animate-template-name {
                position: absolute;
                padding: 2px 12px;
                background: rgba(64, 64, 64, 0.7);
                font-size: 12px;
                text-align: left;
                left: 0;
                bottom: 0;
                color: #FFF;
                width: 100%;
                display: none;
            }
            &:hover .animate-template-name {
                display: block;
            }
            .animation-template-delete, .animation-template-edit {
                display: none;
                position: absolute;
                top: 8px;
                color: rgba(64, 64, 64, 0.7);
                cursor: pointer;
                right: 12px;
                z-index: 10;
            }
            .animation-template-edit {
                right: 40px;
            }
            &:hover .animation-template-delete, &:hover .animation-template-edit {
                display: inline-block;
            }
        }
    }
}
</style>